<template>
  <div >
    <div id="box">
      <div class="login-box">
      <h2>登录</h2>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form">
        <el-form-item prop="username">
          <!-- v-model：双向绑定，placeholder：不输入内容之前提示 -->
          <el-input
            prefix-icon="el-icon-user"
            v-model="ruleForm.username"
            placeholder="用户名"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <!-- type：密码显示* -->
          <!-- <el-input prefix-icon="el-icon-unlock" type="password" v-model="ruleForm.password" placeholder="密码" auto-complete="false"></el-input> -->
          <el-input
            prefix-icon="el-icon-unlock"
            :type="passwordVisible"
            v-model="ruleForm.password"
            placeholder="请输入密码"
            auto-complete="new-password"
            show-password
          >
            <i slot="suffix" :class="icon" @click="showPass"></i>
          </el-input>
        </el-form-item>
        <!-- 验证码 -->
        <!-- <el-form-item label="" prop="checkCode">
          <el-input
            v-model="ruleForm.captcha"
            prefix-icon="lj-icon-yanzhengma"
            autocomplete="off"
            autocapitalize="off"
            spellcheck="false"
            @keyup.enter.native="submit"
            style="float: left; width: 240px"
            placeholder="请填写验证码"
          ></el-input>
          <div style="float: right; height: 40px">
            <img
              v-loading="loading"
              :src="imgsrc"
              alt=""
              @click="acquireVerification"
            />
          </div>
        </el-form-item> -->

        <div class="login-btn">
          <el-button type="primary" @click="submitForm">登录</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </div>
    </div>
  </div>

</template>
<script>
import axios from "axios";
import { getLogin } from '@/api/login'
import store from '@/store'
export default {
  name: "",
  components: {},
  computed:{
    getMenuList(){
      return this.$store.getters.getMenuList
    }
  },
  data() {
    return {
      menu:[],
      loading: false,
      imgsrc: "",
      checked: false,
      passwordVisible: "password",
      icon: "",
      imgUrl: "http://localhost:8888/verifyCode?time=" + new Date(),
      rules: {
        username: [
          // required：规则，trigger：失去焦点触发
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        // code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      //验证码
      ruleForm: {
        username: "",
        password: "",
        // code: "",
        // captcha: "",
        // uuid: "",
      },
    };
  },
  created() {
    // //获取验证码--------------------------------
    // this.acquireVerification();
  },
  methods: {
    //转换验证码接口---------------------------
    // acquireVerification() {
    //   axios
    //     .get("http://172.16.114.237:8080/login/captcha.jpg", {
    //       responseType: "arraybuffer",
    //     })
    //     .then((res) => {
    //       // console.log(res)
    //       this.imgsrc =
    //         "data:image/png;base64," +
    //         btoa(
    //           new Uint8Array(res.data).reduce(
    //             (data, byte) => data + String.fromCharCode(byte),
    //             ""
    //           )
    //         );
    //     });
    // },
     //登录方法--------------------------------
     submitForm() {
      this.subLogin(this.ruleForm);
    },
    //登录接口--------------------------------
    async subLogin(ruleForm) {
      let res = await getLogin(ruleForm);
      console.log(res.data.data.username);
      //存token
      sessionStorage.setItem('tokenStr',res.headers.authorization)
      //存userId
      sessionStorage.setItem('userID',res.headers.userid)
      //存名字
      sessionStorage.setItem('username',res.data.data.username)

      this.menu=res.data.data.data;
      console.log(this.menu);
      localStorage.setItem('menu',JSON.stringify(res.data.data.data))
      if(res.data.code===200){
        this.$router.push('/layout')
      }
    },
   
    resetForm() {
     this.ruleForm.username='';
     this.ruleForm.password='';
    },
    //密码显示隐藏------------------------
    showPass() {
      if (this.passwordVisible === "text") {
        this.passwordVisible = "password";
        //更换图标
        this.icon = "el-icon-view";
      } else {
        this.passwordVisible = "text";
        this.icon = "el-icon-lock";
      }
    },
  },
};
</script>
<style lang="less" scoped>
#box {
  /*图片地址 不重复 水平位置居中 垂直位置居中*/
  background: url("../../../public/images/hospital.png") no-repeat center center;
  height: 100%;
  width: 100%;
  /*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
  background-size: cover;
  position: absolute;
  left: 0;

}

.login-box {
  position: absolute;
  top:calc(50% - 125px);
  left:calc(50% - 250px);
  width: 500px;
  height: 250px;
  background-color: rgba(152, 186, 232, 0.5);

  h2 {
    text-align: center;
    // margin: 10px 0;
    padding-top: 10px;
  }
}
.form {
  padding: 10px;
}
.login-btn {
  display: flex;
  justify-content: center;
}
</style>
